<template>
	<!-- 全真模拟-在线组卷【一键组卷，手动组卷】 -->
	<view id="create-paper">
			<u-navbar :border-bottom="false" title="" back-icon-name="back" back-icon-size="29upx" title-color="#303133" back-icon-color="#363940"></u-navbar>
		<view v-if="groupType == 1">
			<view class="title">
				<text>请选择您的组卷科目</text>
				<text>模拟真实考试，自动生成正式考卷</text>
			</view>
			<view :class="['subject', subId === sub.val && 'active']" v-for="sub in subject[groupType]" :key="sub.name" @click="subId = sub.val">
				<image :src="sub.icon"></image>
				<view class="info">
					<text class="name">{{ sub.name }}</text>
					<text v-show="sub.content" class="content">{{ sub.content }}</text>
				</view>
			</view>
			<view class="tips">
				<text>温馨提示：</text>
				<text index="①">科目一、二合并为1张试卷进行考试，科目三、 四合并为1张试卷进行考试。</text>
				<text index="②">每张试卷考试时间为90分钟，含165题，共 100分。</text>
				<text index="③">考试题型包括判断题、单选题、多选题。其中 判断题40题，每题0.5分，共20分；单选题90 题，每题0.5分，共45分；多选题35题，每题 1分，共35分。</text>
			</view>
			<button type="default" @click="createPaper">一键组卷</button>
		</view>
		<view v-else>
			<view class="title">
				<text>请选择您的组卷科目</text>
				<text>允许跨科目选择不同的章节进行组卷</text>
			</view>
			<view class="subject" :class="[content?'active':'']"  v-for="{ icon, name, content, val } in subject[groupType]" :key="name" @click="selectChapters(val)">
				<image :src="icon"></image>
				<view class="info">
					<text class="name">{{ name }}</text>
					<text v-if="content" class="content">{{ content }}</text>
				</view>
			</view>
			<button type="default" @click="setQueType">设置题型</button>
		</view>
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			groupType: null,
			linkType:0,//1是考试页面进入，需要返回发布考试页面
			subId: '',
			subIdArr:[],
			chapterId: '',
			subject: {
				'1': [
					{ name: '科目一、科目二', content: '政策与法律法规 | 导游业务', icon: require('../../static/createPaper/sub1.png'), val: 1 },
					{ name: '科目三、科目四', content: '全国导游基础知识 | 地方导游基础知识', icon: require('../../static/createPaper/sub4.png'), val: 2 }
				],
				'2': [
					{ name: '科目一 政策与法律法规', content: '', icon: require('../../static/createPaper/sub1.png'), val: 1 },
					{ name: '科目二 导游业务', content: '', icon: require('../../static/createPaper/sub2.png'), val: 2 },
					{ name: '科目三 全国导游基础知识', content: '', icon: require('../../static/createPaper/sub3.png'), val: 9 },
					{ name: '科目四 地方导游基础知识', content: '', icon: require('../../static/createPaper/sub4.png'), val: 10 }
				]
			},
			paper:{},
		};
	},
	onLoad({ groupType,linkType }) {
		//1 一键组卷 2 手动组卷
		this.groupType = groupType;
		this.linkType=linkType
		uni.removeStorageSync('chapterInfo')
	},
	onShow() {
		if (this.groupType == 1) return;
		const chapterInfo = uni.getStorageSync('chapterInfo');
		this.subIdArr=[];
		for (var i = 0; i < chapterInfo.length; i++) {
			const sub = chapterInfo[i];
			if (sub.checked) {
				this.curSubList[i].content = '全部章节';
				continue;
			}
			this.curSubList[i].content = '';
			for (var j = 0; j < sub.chapterList.length; j++) {
				const chapter = sub.chapterList[j];
				if (chapter.checked) {
					this.curSubList[i].content += chapter.chaptername+"；";
				}
			}
		}
	},
	computed: {
		curSubList() {
			return this.subject[this.groupType];
		}
	},
	methods: {
		setQueType() {
			const checkedChapter = this.subject['2'].filter(item => item.content);
			if (checkedChapter.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '请选择科目！'
				});
				return;
			}
			for(var g=0;g<checkedChapter.length;g++){
				let checkId=checkedChapter[g].val
				if(this.subIdArr.indexOf(checkId)==-1){
					this.subIdArr.push(checkId)
				}
			}
			const subInput=this.subIdArr.toString();
			uni.navigateTo({
				url:`setQueType?groupType=${this.groupType}&subId=${subInput}&linkType=${this.linkType}`
			});
		},
		createPaper() {
			if (!this.subId) {
				uni.showToast({
					title: '请选择科目！',
					icon: 'none'
				});
				return;
			}
			this.request
				.post('/app/teacher/papermanage/groupPaper', {
					groupType: this.groupType,
					subId: this.subId
				})
				.then(res => {
					this.paper = res;
					uni.showToast({
						title:"组卷成功",
						duration:1000,
						icon:"success"
					})
					// 1发布考试页面跳转组卷
					const linktype=parseInt(this.linkType)
					setTimeout(function(){
						if(linktype==1){
							uni.navigateBack({
								// url:'../exam/examSelect'
								delta: 2,
							})
						}else{
							uni.navigateBack({
								url:'../paperManagement/paperManagement'
							})
						}
					},1000)
					
				});
		},
		selectChapters(val) {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/teacher/papermanage/getSubAndChapterList')
					.then(res => {
						uni.navigateTo({
						   url: 'selectChapters?subId='+val+'&list='+JSON.stringify(res)
						});
					   resolve();
					})
					.finally(uni.hideLoading)
					.catch(reject);
			});
		}
	}
};
</script>

<style scoped lang="scss">
/deep/	.u-navbar{
		background: #FFF!important;
	}
.title {
	font-size: 38upx;
	font-weight: 500;
	color: #363940;
	text-align: center;
	margin-bottom: 50upx;
	text {
		display: block;
		line-height: 2;
	}
	text:last-child {
		font-size: 30upx;
		font-weight: 400;
		color: #6b7180;
	}
}

.subject {
	display: flex;
	align-items: center;
	padding: 30upx 60upx;
	width: 650upx;
	height: 160upx;
	border-radius: 18upx;
	box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
	margin: auto;
	margin-bottom: 40upx;
	image {
		margin-right: 40upx;
		width: 50upx;
		height: 50upx;
	}
	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		.name {
			font-size: 32upx;
			font-weight: 500;
			color: #363940;
		}
		.content {
			font-size: 26upx;
			font-weight: 400;
			color: #6b7180;
			margin-top: 16upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 440upx;
		}
	}
}
button {
	width: 350upx;
	background: $linear-bg;
	border-radius: 38px;
	font-size: 32upx;
	font-weight: 400;
	color: #ffffff;
	line-height: 76upx;
	margin-top: 98upx;
}
.tips {
	padding: 0 60upx;
	text {
		display: block;
		padding-left: 36upx;
		margin-left: 30upx;
		margin-bottom:20upx;
		position: relative;
		color: #A6A6A6;
	}
	text::before {
		position: absolute;
		top: 0;
		left: 0;
		content: attr(index);
	}
	text:first-child {
		font-size: 28upx;
		font-weight: 500;
		color: #636874;
		padding-left: 0;
		margin-left: 0;
	}
}
.active {
	background-color: #edeffb;
}
</style>
